<!--
 * @Description: zzb
 * @Version: 0.0.1
 * @Autor: zzb
 * @Date: 2021-11-25 11:18:32
 * @LastEditors: zzb
 * @LastEditTime: 2023-03-07 14:46:48
-->
<template>
  <div class="ace-editor" ref="ace"></div>
</template>

<script>
// import ace from "ace-builds";
import ace from "ace-builds/src-noconflict/ace";
import "ace-builds/src-noconflict/snippets/javascript";
import "ace-builds/src-noconflict/snippets/html";
import "ace-builds/src-noconflict/snippets/css";
import "ace-builds/src-noconflict/snippets/scss";
import "ace-builds/src-noconflict/snippets/json";
import "ace-builds/src-noconflict/snippets/text";
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/theme-monokai";
// import "ace-builds/src-noconflict/mode-javascript"; // 导入JavaScript语言模式
import "ace-builds/src-noconflict/mode-html"; // 导入html语言模式

// import "ace-builds/webpack-resolver";

ace.config.setModuleUrl(
  "ace/ext/searchbox",
  require("file-loader?esModule=false!ace-builds/src-noconflict/ext-searchbox.js")
);

ace.config.setModuleUrl(
  "ace/mode/html",
  require("file-loader?esModule=false!ace-builds/src-noconflict/mode-html.js")
);

ace.config.setModuleUrl(
  "ace/mode/html_worker",
  require("file-loader?esModule=false!ace-builds/src-noconflict/worker-html.js")
);
// 码提示ext-language_tools.js 需要这个包
ace.config.setModuleUrl(
  "ace/mode/javascript_worker",
  require("file-loader?esModule=false!ace-builds/src-noconflict/worker-javascript.js")
);
ace.config.setModuleUrl(
  "ace/theme/monokai",
  require("file-loader?esModule=false!ace-builds/src-noconflict/theme-monokai.js")
);
ace.config.setModuleUrl(
  "ace/ext/language_tools",
  require("file-loader?esModule=false!ace-builds/src-noconflict/ext-language_tools.js")
);

ace.config.setModuleUrl(
  "ace/snippets/javascript",
  require("file-loader?esModule=false!ace-builds/src-noconflict/snippets/javascript.js")
);
ace.config.setModuleUrl(
  "ace/snippets/html",
  require("file-loader?esModule=false!ace-builds/src-noconflict/snippets/html.js")
);
ace.config.setModuleUrl(
  "ace/snippets/css",
  require("file-loader?esModule=false!ace-builds/src-noconflict/snippets/css.js")
);
ace.config.setModuleUrl(
  "ace/snippets/scss",
  require("file-loader?esModule=false!ace-builds/src-noconflict/snippets/scss.js")
);
ace.config.setModuleUrl(
  "ace/snippets/json",
  require("file-loader?esModule=false!ace-builds/src-noconflict/snippets/json.js")
);
ace.config.setModuleUrl(
  "ace/snippets/text",
  require("file-loader?esModule=false!ace-builds/src-noconflict/snippets/text.js")
);

const beautify = require("js-beautify");

const beautify_js = beautify.js;
const beautify_css = beautify.css;
const beautify_html = beautify.html;
export default {
  props: {
    template: String,
    value: {
      type: String,
      require: true,
    },
  },
  data() {
    return {
      html: this.template || "",
      aceEditor: null,
    };
  },
  components: {},
  watch: {
    template(nval) {
      this.syncSetHtml(nval);
    },
  },
  mounted() {
    this.initEditor();
  },

  methods: {
    initEditor() {
      this.aceEditor = null;
      let html = this.html
        .replaceAll("<!-- <style", "<style")
        .replaceAll("</style> -->", "</style>");
      this.aceEditor = ace.edit(this.$refs.ace, {
        // maxLines: 20,
        minLines: 20,
        fontSize: 14,
        value: beautify_html(html)
          .replaceAll("{<", "\n  {<")
          // .replaceAll(">}", ">}\n"),
          .replaceAll(">{", ">\n{"),
        // .replaceAll("}</", "}\n</"),
        theme: "ace/theme/monokai",
        mode: "ace/mode/html",
        wrap: true,
        tabSize: 4,
      });
      // this.aceEditor.setTheme("ace/theme/monokai");

      // this.aceEditor.getSession().setMode("ace/mode/html");
      this.$nextTick(() => {
        // 激活自动提示
        this.aceEditor.setOptions({
          enableSnippets: true,
          enableLiveAutocompletion: true,
          enableBasicAutocompletion: true,
          printMarginColumn: 80,
          autoScrollEditorIntoView: true,
          copyWithEmptySelection: true,
        });
      });

      this.aceEditor.getSession().on("change", this.codeChange);
      // this.aceEditor.container.addEventListener(
      //   "contextmenu",
      //   function (e) {
      //     e.preventDefault();
      //     alert("success!");
      //     return false;
      //   },
      //   false
      // );
      //格式化
      // this.aceEditor.commands.addCommand({
      //   name: "formattingCode",
      //   bindKey: { win: "Shift-Alt-F", mac: "Shift-Alt-F" },
      //   exec: (editor) => {
      //     console.log("editor: ", editor);
      //     this.formattingCode();
      //   },
      // });
      // this.aceEditor.commands.addCommand({
      //   name: "myCommand",
      //   bindKey: { win: "Ctrl-M", mac: "Command-M" },
      //   exec: function (editor) {
      //     //...
      //   },
      // });
      console.log("代码编辑器完成");
      console.log("this.aceEditor: ", this.aceEditor);
    },
    formattingCode() {
      console.log("this.html", this.html);
    },
    codeChange() {
      this.html = this.aceEditor.getSession().getValue();
      this.$emit("editorChange", this.html);
    },

    editorChange(html) {
      this.html = html;
      this.aceEditor.setValue(html);
    },
    syncSetHtml(value = this.html) {
      if (this.html != value) {
        this.aceEditor?.setValue(value, 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.ace-editor,
.ace_content {
  height: calc(654px - 0px) !important;
  width: 100%;
}
</style>
